import React, {FC, useMemo} from 'react';
import useList from '@/hooks/useList';
import {ProColumns} from '@ant-design/pro-table';
import service from '@/pages/sys/historyLog/service';
import {HistoryLogModel} from '@/pages/sys/historyLog/data';
import Details from '@/pages/sys/historyLog/components/Details';
import ProTableCrud, {ProTableCrudOperate} from "@/components/ProTableCrud";
import {Tag} from "antd";
import styles from '@/utils/utils.less'
import useDialog from "@/hooks/useDialog";
import {DialogOperate} from "@/global";

// const startDate = moment().subtract(7, 'd');
// const endDate = moment();

interface HistoryLogTableProps {
  /** 数据主键 */
  primaryKey: string;
  /** 数据表名 */
  tableName: string;
}

/** 系统历史日志模块 */
const HistoryLogTable: FC<HistoryLogTableProps> = props => {
  const {primaryKey, tableName} = props;
  const detailsOperate = useDialog();
  //List
  const listOperate = useList<HistoryLogModel>({
    onLoad: (params) => {
      if (!primaryKey) return undefined;
      if (!tableName) return undefined;

      // const {operateDateTime, ...rest} = params;
      // const operateStartDateTime = (operateDateTime && operateDateTime[0]) || (formatDate(startDate));
      // const operateEndDateTime = (operateDateTime && operateDateTime[1]) || (formatDate(endDate));
      // return service.selectPageList({...rest, primaryKey,operateStartDateTime, operateEndDateTime});
      return service.selectPageList({...params, primaryKey, tableName});
    },
  });

  //表格列
  const cols = useMemo(() => getCols(detailsOperate), []);

  //增删改查选项
  const tableOperate: ProTableCrudOperate<HistoryLogModel> = {
    showToolbar: false,
    showOptionColumn: false,
    cols,
    listOperate,
    detailsOperate,
    getDetailsElement: (props) => (<Details {...props}/>),
  };

  return (
    <ProTableCrud
      search={false}
      className={styles.historyLogTable}
      tableLayout={undefined}
      pagination={{hideOnSinglePage: true}}
      rowSelection={undefined}
      operate={tableOperate}/>
  );
};

/** 获取表格列 */
function getCols(detailsOperate: DialogOperate): (ProColumns<HistoryLogModel>[]) {
  return [
    {
      title: '操作日期',
      dataIndex: 'operateDateTime',
      align: 'center',
      hideInSearch: true,
      sorter: true,
      width: 170,
      render: (t, r) => {
        return (
          <a onClick={() => detailsOperate.show({id: r.id})}>{t}</a>
        );
      },
      // order: 5,
      // valueType: 'dateRange',
      // initialValue: [startDate, endDate],
      // formItemProps: {
      //   'placeholder': ['开始日期', '结束日期'],
      //   'disabledDate': (current: any) => {
      //     //不能选择大于今天的日期
      //     return current && current > moment();
      //   },
      // },
    },
    {
      title: '操作人',
      dataIndex: 'operateUserName',
      hideInSearch: true,
      align: 'center',
      width: 120,
    },
    {
      title: '操作类型',
      dataIndex: 'category',
      hideInSearch: true,
      align: 'center',
      width: 120,
      filters: undefined,
      render: (_, r) => {
        let color = 'default';
        if (r.category === 1) {
          color = '#5cb85c';
        } else if (r.category === 2) {
          color = '#337ab7';
        } else if (r.category === 3) {
          color = '#d9534f';
        }
        return (
          <Tag color={color} key={r.category}>
            {r.categoryName}
          </Tag>
        );
      },
    },
    {
      key: 'other',
    },
  ]
}

export default React.memo(HistoryLogTable);

